<template>
  <el-cascader
    ref="areaSelect"
    :value="value"
    :clearable="true"
    :filterable="true"
    :filter-method="filterMethod"
    @change="onChange"
    :props="propsOption"
    :options="options">
  </el-cascader>
</template>

<script>

let areaObj = null;

export default {
  name: 'AreaSelect',
  props: {
    value: null,
    lazy: false,
    checkStrictly: Boolean,
    emitPath: Boolean,
    level: {
      type: Number,
      default: 3,
    }
  },
  data() {
    return {
      selectValue: [],
      options: [],
      propsOption: {
        checkStrictly: !!this.checkStrictly,
        emitPath: !!this.emitPath,
        lazy: this.lazy,
        lazyLoad: this.lazyLoad 
      }
    }
  },
  methods: {
    getLabel(node) {
      if (node.parent) {
        return this.getLabel(node.parent) + node.label
      } else {
        return node.label
      }
    },
    onChange(value) {
      this.$emit('input', value);
      let nodes = this.$refs.areaSelect.getCheckedNodes(), label = '';
      if (nodes && nodes.length > 0) {
        label = this.getLabel(nodes[0]);
      }
      this.$emit('labelChange', label);
    },
    getChildren(key, level = 1) {
      let tempObj = areaObj[key];
      let children = [];
      if (tempObj) {
        children = Object.keys(tempObj).map(key => {
          let node = {
              value: key,
              label: tempObj[key],
              leaf: this.level == level
          }
          if (!this.lazy && this.level > level) {
            node.children = this.getChildren(key, level + 1);
          }

          return node;
        })
      }
      return children;
    },
    initOption() {
      if (this.lazy) {
        let topObj = areaObj['100000'];
        this.options = Object.keys(topObj).map( key => {
          return {
            value: key,
            label: topObj[key],
            leaf: this.level == 1 
          }
        })
      } else {
        this.options = this.getChildren('100000');
      }
    },
    filterMethod(node, keyword) {
      return node.label.indexOf(keyword) > -1
    },
    lazyLoad(node, resolve) {
      if (node.level === 0) {
        return resolve();
      }
      let tempObj = areaObj[node.value];
      if (!tempObj) {
        return resolve();
      }
      let tempKeyList = Object.keys(tempObj),
        options = [];
      if (node.level === 1 && tempKeyList.length <= 2) {
        tempKeyList.forEach( key => {
          let tempObjSub = areaObj[key];
          Object.keys(tempObjSub).forEach(subKey => {
            options.push({
              value: subKey,
              label: tempObjSub[subKey],
              leaf: true
            })
          })
        })
      } else {
        options = tempKeyList.map( key => {
          return {
            value: key,
            label: tempObj[key],
            leaf: node.level + 1 == this.level || node.level === 2
          }
        })
      }
      resolve(options);
    }
  },
  created() {
    if (!areaObj) {
      import('./districts.js').then(data => {
        areaObj = data.default;
        this.initOption()
      })
    } else {
      this.initOption();
    }
  },
  mounted() {
    this.$emit('init', this.$refs.areaSelect)
  }
}
</script>

<style>

</style>